/**
 * 换车信息
 */
import {Form, Row, Col, Collapse} from 'antd'
import React, {useEffect, useState} from 'react'
import type {UploadFile} from 'antd/es/upload/interface'
import cardStyles from '../index.less'
import styles from './index.less'
import {getTransferDetails} from '@/service/order/index'
import {getPublicDownloadUrl} from '@/service/common/upload'
import ChangeCarDetails from './details/changeCar/details'
import ChangeCarIndex from './details/changeCar/index'

const {Panel} = Collapse

const formLayout = {
	labelCol: {
		xs: {span: 24},
		sm: {span: 4},
	},
	wrapperCol: {
		xs: {span: 24, offset: 0},
		sm: {span: 20, offset: 0},
	},
}
function ExchangeCarInfo(props: any) {
	const [form] = Form.useForm()
	const {info, type} = props
	const [data, setData] = useState<any>()
	const [fileList, setFileList] = useState<UploadFile[]>([]) // 原车
	const [fileList1, setFileList1] = useState<UploadFile[]>([]) // 新车
	const [fileList2, setFileList2] = useState<UploadFile[]>([]) // 合同
	const [fileList3, setFileList3] = useState<UploadFile[]>([]) // 新车-交车
	const customizeHeader = (value: string) => (
		<div>
			<div className={styles.tip} />
			{value}
		</div>
	)
	useEffect(() => {
		if (info?.id) {
			getTransferDetails(info?.id).then((res: any) => {
				if (res.success) {
					setData(res?.data)
					if (res?.data?.validateReturnCar?.attachmentList) {
						getPublicDownloadUrl(
							res?.data?.validateReturnCar?.attachmentList,
						).then((res1: any) => {
							setFileList(res1?.data)
						})
					}
					if (res?.data?.validateDeliveryCar?.attachmentList) {
						getPublicDownloadUrl(
							res?.data?.validateDeliveryCar?.attachmentList,
						).then((res2: any) => {
							setFileList1(res2?.data)
						})
					}
					if (res?.data?.signedData?.attachmentList) {
						getPublicDownloadUrl(
							res?.data?.signedData?.attachmentList,
						).then((res3: any) => {
							setFileList2(res3?.data)
						})
					}
					if (res?.data?.deliveryData?.attachmentList) {
						getPublicDownloadUrl(
							res?.data?.deliveryData?.attachmentList,
						).then((res4: any) => {
							setFileList3(res4?.data)
						})
					}
				}
			})
			form.setFieldsValue(info)
		}
	}, [info])
	return (
		<div className={cardStyles.card} id="exchangeCar">
			<Collapse
				defaultActiveKey={['1', '2']}
				ghost
				expandIconPosition="end">
				<Panel header={customizeHeader('换车信息')} key="1">
					<Form
						form={form}
						{...formLayout}
						wrapperCol={{flex: 1}}
						autoComplete="off">
						<p className={cardStyles.title}>换车申请</p>
						<Row gutter={24} className={cardStyles.rows}>
							<Col span={24}>
								<Form.Item name="applyTime" label="换车时间">
									<span>{data?.applyTime}</span>
								</Form.Item>
							</Col>
							<Col span={24}>
								<Form.Item name="applyRemark" label="换车原因">
									<span>{data?.applyRemark}</span>
								</Form.Item>
							</Col>
							{/* <Col span={24}>
								<Form.Item name="" label="换车里程数">
									<span>{data?.time}</span>
								</Form.Item>
							</Col> */}
							<Col span={24}>
								<Form.Item name="putDepotName" label="退回仓库">
									<span>{data?.putDepotName}</span>
								</Form.Item>
							</Col>
						</Row>
						<p className={cardStyles.title}>绑定新车辆</p>
						<Row gutter={24} className={cardStyles.rows}>
							<Col span={24}>
								<Form.Item name="vinNo" label="车架号">
									<span>{data?.tiedCar?.vinNo}</span>
								</Form.Item>
							</Col>
							<Col span={24}>
								<Form.Item name="plateNo" label="车牌号">
									<span>{data?.tiedCar?.plateNo}</span>
								</Form.Item>
							</Col>
							<Col span={24}>
								<Form.Item
									name="modelName"
									label="车型/品牌/车系">
									<span>{data?.tiedCar?.brandName}</span>
								</Form.Item>
							</Col>
							<Col span={24}>
								<Form.Item
									name="depotName"
									label="车辆所在仓库">
									<span>{data?.tiedCar?.depotName}</span>
								</Form.Item>
							</Col>
							<Col span={24}>
								<Form.Item
									name="insuranceNames"
									label="车辆已购保险">
									<span>{data?.tiedCar?.insuranceNames}</span>
								</Form.Item>
							</Col>

							<Col span={24}>
								<Form.Item name="remark" label="备注">
									<span>{data?.tiedCar?.tiedRemark}</span>
								</Form.Item>
							</Col>
						</Row>
						<p className={cardStyles.title}>原车验车信息</p>
						<Row gutter={24} className={cardStyles.rows}>
							<Col span={24}>
								<Form.Item
									name="validatePerson"
									label="验车人员">
									<span>
										{
											data?.validateReturnCar
												?.validatePerson
										}
									</span>
								</Form.Item>
							</Col>
							<Col span={24}>
								<Form.Item label="验车时间" name="validateTime">
									<span>
										{data?.validateReturnCar?.validateTime}
									</span>
								</Form.Item>
							</Col>
							<Col span={24}>
								<Form.Item label="备注" name="remark">
									<span>
										{data?.validateReturnCar?.remark}
									</span>
								</Form.Item>
							</Col>
							<Col span={24}>
								<Form.Item
									label="验车清单"
									name="attachmentList">
									{fileList?.map((res: any) => (
										<a
											href={res.url}
											download={res?.filename}
											target="blank">
											{res.filename}
										</a>
									))}
								</Form.Item>
							</Col>
						</Row>
						<p className={cardStyles.title}>新车验车信息</p>
						<Row gutter={24} className={cardStyles.rows}>
							<Col span={24}>
								<Form.Item label="验车人员">
									<span>
										{
											data?.validateDeliveryCar
												?.validatePerson
										}
									</span>
								</Form.Item>
							</Col>
							<Col span={24}>
								<Form.Item label="验车时间">
									<span>
										{
											data?.validateDeliveryCar
												?.validateTime
										}
									</span>
								</Form.Item>
							</Col>
							<Col span={24}>
								<Form.Item label="备注">
									<span>
										{data?.validateDeliveryCar?.remark}
									</span>
								</Form.Item>
							</Col>
							<Col span={24}>
								<Form.Item label="验车清单上传">
									{fileList1?.map((res: any) => (
										<a
											href={res.url}
											download={res?.filename}>
											{res.filename}
										</a>
									))}
								</Form.Item>
							</Col>
						</Row>
						<p className={cardStyles.title}>合同信息</p>
						<Row gutter={24} className={cardStyles.rows}>
							<Col span={24}>
								<Form.Item label="备注" name="remark">
									<span>{data?.signedData?.remark}</span>
								</Form.Item>
							</Col>
							<Col span={24}>
								<Form.Item
									label="合同附件"
									name="attachmentList">
									{fileList2?.map((res: any) => (
										<a
											href={res.url}
											download={res?.filename}>
											{res.filename}
										</a>
									))}
								</Form.Item>
							</Col>
						</Row>
						<p className={cardStyles.title}>新车交车信息</p>
						<Row gutter={24} className={cardStyles.rows}>
							<Col span={24}>
								<Form.Item label="交车时间" name="deliveryTime">
									<span>
										{data?.deliveryData?.deliveryTime}
									</span>
								</Form.Item>
							</Col>
							<Col span={24}>
								<Form.Item
									label="交车工作人员"
									name="deliveryPerson">
									<span>
										{data?.deliveryData?.deliveryPerson}
									</span>
								</Form.Item>
							</Col>
							<Col span={24}>
								<Form.Item label="备注" name="remark">
									<span>{data?.deliveryData?.remark}</span>
								</Form.Item>
							</Col>
							<Col span={24}>
								<Form.Item
									label="交车附件"
									name="attachmentList">
									{fileList3?.map((res: any) => (
										<a
											href={res.url}
											download={res?.filename}>
											{res.filename}
										</a>
									))}
								</Form.Item>
							</Col>
						</Row>
						{type &&
						(data?.settlementStatus === 1 ||
							data?.settlementStatus === 3 ||
							data?.settlementStatus === 9 ||
							data?.settlementStatus === 10) ? (
							<ChangeCarDetails
								collectFeeList={data?.collectFeeList}
								deductionFeeList={data?.deductionFeeList}
							/>
						) : (
							<></>
						)}

						{!type ? (
							<>
								{data?.settlementStatus === 1 ||
								data?.settlementStatus === 1 ||
								data?.settlementStatus === 9 ||
								data?.settlementStatus === 10 ? (
									<ChangeCarDetails
										collectFeeList={data?.collectFeeList}
										deductionFeeList={
											data?.deductionFeeList
										}
									/>
								) : (
									<ChangeCarIndex info={info?.id} />
								)}
							</>
						) : (
							<></>
						)}
					</Form>
				</Panel>
			</Collapse>
		</div>
	)
}

export default ExchangeCarInfo
